<template>
  <view class="collect-item">
    <wd-swipe-action>
      <view class="item-content">
        <image class="product-image" :src="item.thumbImg" mode="aspectFill" />
        <view class="product-info">
          <text class="product-title">{{ item.skuName }}</text>
          <!-- <text class="product-spec">* {{ JSONSpec(item.skuSpec) }}</text> -->
          <view class="price-section">
            <text class="product-price">¥{{ item.salePrice }}</text>
            <text class="product-marketPrice">¥{{ item.marketPrice }}</text>
          </view>
        </view>
      </view>
      <template #right>
        <view class="swipe-action" @click="handleDelete(item.rowId)">
          <view class="button">删除</view>
        </view>
      </template>
    </wd-swipe-action>
  </view>
</template>

<script lang="ts" setup>
defineProps<{ item: any }>()
const emit = defineEmits(['delete'])
const handleDelete = (id: number) => {
  emit('delete', id)
}

// 规格格式化（处理字符串类型）
// const JSONSpec = (spec: string | object) => {
//   try {
//     const specObj = typeof spec === 'string' ? JSON.parse(spec) : spec
//     console.log(Object.values(specObj))
//     let data = null
//     Object.keys(specObj).forEach((key) => {
//       data = specObj[key].join('/')
//     })
//     console.log(data)

//     return Object.values(specObj).join('/')
//   } catch {
//     return '规格信息异常'
//   }
// }
</script>

<style lang="scss" scoped>
//
.collect-item {
  margin: 15rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.item-content {
  display: flex;
  padding: 20rpx;
  .product-image {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    border-radius: 12rpx;
  }

  .product-info {
    flex: 1;
    .product-title {
      font-size: 24rpx;
      color: #333;
    }

    .product-spec {
      display: inline-block;
      padding: 8rpx 20rpx;
      margin: 15rpx 0;
      font-size: 24rpx;
      color: #666;
      background: #f5f5f5;
      border-radius: 8rpx;
    }

    .price-section {
      margin-top: 20rpx;
      .product-price {
        margin-right: 15rpx;
        font-size: 32rpx;
        color: #e4393c;
      }
      .product-marketPrice {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
  }
}

.swipe-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  height: 100%;
  font-size: 28rpx;
  color: white;
  background: #e4393c;
}
</style>
